<!-- 编辑个人资料 -->
<template>
	<view class="edit">
		<u-navbar title="编辑个人资料" @leftClick="leftClick" leftIconSize="32" :placeholder="true"></u-navbar>
		<view class="content" v-if="info.id">
			<!-- 头像 -->
			<view class="item">
				<view class="inner" @click="updateAvater">
					<view class="left">头像</view>
					<view class="right">
						<!-- #ifdef APP-PLUS -->
						<avatar class="pic" :src="info.headPortrait"></avatar>
						<!-- #endif -->
						<!-- #ifdef MP-WEIXIN -->
						<image class="pic" mode="aspectFill" :src="info.headPortrait"></image>
						<!-- #endif -->
					</view>
				</view>
				<view class="line"></view>
			</view>
			<!-- 昵称 -->
			<view class="item">
				<view class="inner">
					<view class="left">昵称</view>
					<u--input class="input" inputAlign="right" color="#999999" placeholder="请填写昵称" border="none" v-model="info.nickName" maxlength="8"></u--input>
					<!-- <view class="right">
						<view class="nick_name">{{ info.nickName }}</view>
					</view> -->
				</view>
				<view class="line"></view>
			</view>
			<!-- 一句话介绍 -->
			<view class="item">
				<view class="inner intro">
					<view class="left">一句话介绍</view>
					<u-textarea confirmType="done" count class="text_area" height="140" v-model="info.introduction" placeholder="介绍自己的职业或兴趣"></u-textarea>
				</view>
				<view class="line"></view>
			</view>
			<!-- 性别 -->
			<view class="item mb20" @click.stop="showSex = true">
				<view class="inner">
					<view class="left">性别</view>
					<view class="right">
						<text class="text">{{ sexType(info.sex) }}</text>
						<image class="arrow" src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/icon18.png"></image>
					</view>
				</view>
			</view>
			<!-- 生日 -->
			<view class="item">
				<view class="inner" @click.stop="showTime = true">
					<view class="left">生日</view>
					<view class="right">
						<text class="text">{{ info.birthday ? info.birthday : '未填写' }}</text>
						<image class="arrow" src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/icon18.png"></image>
					</view>
				</view>
				<view class="line"></view>
			</view>
			<!-- 所在城市 -->
			<view class="item">
				<pickerRegion @change="changeArea">
					<view class="inner">
						<view class="left">所在城市</view>
						<view class="right">
							<text class="text">{{ info.address ? info.address : '请选择城市' }}</text>
							<image class="arrow" src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/icon18.png"></image>
						</view>
					</view>
				</pickerRegion>
				<view class="line"></view>
			</view>
			<!-- 所在行业 -->
			<view class="item mb20">
				<view class="inner">
					<view class="left">所在行业</view>
					<view class="right">
						<u--input class="input" inputAlign="right" color="#999999" placeholder="请填写行业" border="none" v-model="info.industry" maxlength="40"></u--input>
					</view>
				</view>
			</view>
			<!--  -->
			<!-- 微信账号绑定 -->
			<view class="item pb70" @click.stop="wxBind(info.wxOpenid)">
				<view class="inner">
					<view class="left">微信账号绑定</view>
					<view class="right">
						<text class="text">{{ info.wxOpenid ? '解除绑定' : '未绑定' }}</text>
						<image class="arrow" src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/icon18.png"></image>
					</view>
				</view>
				<view class="line"></view>
			</view>
			<view class="submit"><u-button type="primary" text="保存" shape="circle" @click="submit"></u-button></view>
		</view>

		<!-- 昵称弹窗-->
		<u-popup class="nick" :show="showName" mode="center" round="20">
			<view class="name">
				<view class="title">编辑昵称</view>
				<view class="ipt">
					<u-input
						class="input"
						type="text"
						:showWordLimit="true"
						placeholder="请输入内容"
						border="surround"
						v-model="info.nickName"
						:maxlength="8"
						:focus="showName"
						@input="getlen"
					></u-input>
					<view class="len">{{ info.len }}/8</view>
				</view>
				<text>好的昵称可以让你的朋友更容易记住你哦~</text>
			</view>
			<view class="btns">
				<view @click="showName = false">取消</view>
				<view class="sure" @click.stop="sureNickName">确定</view>
			</view>
		</u-popup>
		<!-- 性别 -->
		<u-popup :show="showSex" mode="bottom" round="20">
			<view class="sex">
				<view class="title">请选择性别</view>
				<view class="imgs">
					<view class="item" v-for="(item, index) in sexs" :key="index" @click="selectSex(item.val)">
						<view class="ico">
							<image v-if="info.sex == item.val" :src="item.active"></image>
							<image v-else :src="item.inactive"></image>
						</view>
						<text :class="{ color: info.sex == item.val }">{{ item.text }}</text>
					</view>
				</view>
				<view class="close"><image @click="showSex = false" src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/close.png"></image></view>
			</view>
		</u-popup>

		<!-- 生日 -->
		<u-datetime-picker
			title="请选择生日"
			:show="showTime"
			itemHeight="80"
			mode="date"
			:maxDate="new Date().getTime()"
			:minDate="0"
			v-model="birthday"
			@confirm="confirmDate"
			@cancel="showTime = false"
		></u-datetime-picker>

		<!-- 解绑 -->
		<u-popup :show="showBind" mode="center" round="20">
			<view class="name">
				<view class="title">解绑确认</view>
				<text class="text">解除绑定后将不能使用微信一键登录~</text>
			</view>
			<view class="btns">
				<view @click="showBind = false">我再想想</view>
				<view class="sure" @click.stop="sureRemove">确认解绑</view>
			</view>
		</u-popup>
		<!-- 裁剪弹出层 -->
		<kps-image-cutter @ok="onok" @cancel="oncancle" :url="uploadUrl" :fixed="true" :blob="false" :width="200" :height="200" :maxWidth="500" :maxHeight="500"></kps-image-cutter>
	</view>
</template>

<script>
import { getUserData, updateUser, userDetails, bindwx, unbindwx } from '@/apis/apis.js';
import { uploadFileFn } from '@/utils/uploadFile.js';
import { baseUrl } from '@/utils/request.js';
import avatar from '@/components/avatar.vue';
import pickerRegion from '@/components/pickerRegion/index.vue';
import kpsImageCutter from '@/components/ksp-image-cutter/ksp-image-cutter.vue';
// import btCropperPopup from '../modules/btCropperPopup.vue'
export default {
	components: {
		pickerRegion,
		avatar,
		kpsImageCutter
		// btCropperPopup
	},
	data() {
		return {
			info: {},
			birthday: '',
			sexs: [
				{
					val: 1,
					inactive: 'https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/edit/man.png',
					active: 'https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/edit/man_act.png',
					text: '我是男生'
				},
				{
					val: 0,
					inactive: 'https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/edit/woman.png',
					active: 'https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/edit/woman_act.png',
					text: '我是女生'
				},
				{
					val: -1,
					inactive: 'https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/edit/secret.png',
					active: 'https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/edit/secret_act.png',
					text: '我要保密'
				}
			],
			showName: false,
			showSex: false,
			showTime: false,
			showBind: false,
			uploadUrl: ''
		};
	},
	onLoad() {
		this.init();
	},
	methods: {
		//提交
		submit() {
			this.saveIntro();
		},
		// 返回上一级
		leftClick() {
			uni.navigateBack(0);
		},
		oncancle() {
			this.uploadUrl = '';
		},
		onok(ev) {
			let path = ev.path;
			let that = this;
			uni.uploadFile({
				url: baseUrl + '/api/commons/upload',
				fileType: 'image',
				filePath: path,
				name: 'file',
				header: {
					'known-session': uni.getStorageSync('token')
				},
				formData: {
					user: 'test'
				},
				success: uploadFileRes => {
					console.log(JSON.parse(uploadFileRes.data));
					let url = JSON.parse(uploadFileRes.data).url;
					that.info.headPortrait = url;
					that.uploadUrl = '';
					// that.updateUserDataApi();
				},
				file: err => {
					console.log(err);
				}
			});
		},
		//性别参数
		sexType(v) {
			let sex = '';
			switch (v) {
				case -1:
					sex = '保密';
					break;
				case 1:
					sex = '男';
					break;
				case 0:
					sex = '女';
					break;
			}
			return sex;
		},
		init() {
			this.info = {};
			userDetails().then(res => {
				console.log('details', res.data);
				res.data.len = res.data.nickName.length;
				this.info = res.data;
			});
		},
		updateAvater() {
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'],
				sourceType: ['camera', 'album'],
				success: res => {
					console.log(res);
					this.uploadUrl = res.tempFilePaths[0];
				}
			});
		},
		saveIntro() {
			uni.showModal({
				title: '提示',
				content: '是否保存更改',
				success: res => {
					if (res.confirm) {
						this.updateUserDataApi();
					}
				}
			});
		},
		// 提交更新
		updateUserDataApi() {
			updateUser(this.info).then(res => {
				console.log(res);
				if (res.code == 200) {
					this.showName = false;
					uni.showToast({
						title: '已保存',
						icon: 'none'
					});
					setTimeout(() => {
						uni.navigateBack(0);
					}, 200);
					this.init();
				}
			});
		},
		// 性别
		selectSex(v) {
			console.log(v);
			this.info.sex = v;
			// this.updateUserDataApi();
			this.showSex = false;
		},
		// 修改昵称
		sureNickName() {
			// this.updateUserDataApi();
		},
		getlen(e) {
			console.log(e.length);
			this.info.len = e.length;
			// console.log(this.info.len)
		},
		// 选择生日
		confirmDate(e) {
			const date = this.$timesFormat(e.value, '-').split(' ')[0];
			console.log(date);
			this.info.birthday = date;
			this.showTime = false;
			// this.updateUserDataApi();
		},
		// 选择地区
		changeArea(e) {
			console.log(e);
			this.info.address = `${e.data[0].name}/${e.data[1].name}/${e.data[2].name}`;
			// this.updateUserDataApi();
		},
		// 微信账号绑定
		wxBind(e) {
			if (!e) {
				this.bindWxApi();
			} else {
				this.showBind = true;
			}
		},
		// 绑定
		bindWxApi() {
			uni.login({
				provider: 'weixin',
				success: data => {
					console.log(data);
					bindwx({
						openid: data.authResult.openid,
						unionid: data.authResult.unionid
					}).then(bind => {
						console.log('bind', bind);
						uni.showToast({
							title: '绑定成功',
							icon: 'none'
						});
						this.init();
					});
				},
				fail() {
					console.log('失败');
				}
			});
		},
		// 确认解绑操作
		async sureRemove() {
			const res = await unbindwx();
			if (res.code == 200) {
				this.showBind = false;
				this.init();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.edit {
	background: #f8f8f8;
	border-top: 1rpx solid #f1f1f1;

	.content {
		.item {
			background: #ffffff;
			padding: 0 60rpx 0 40rpx;

			.inner {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 35rpx 0;

				.left {
					font-size: 30rpx;
					font-weight: 500;
					color: #1a1a1a;
				}

				.right {
					font-size: 30rpx;
					color: #999999;

					.pic {
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;
						overflow: hidden;
					}
				}
			}

			.intro {
				display: block;
			}

			.line {
				height: 1rpx;
				width: 100%;
				background: #f1f1f1;
			}
		}

		.arrow {
			width: 15rpx;
			height: 25rpx;
			margin-left: 18rpx;
		}

		.text_area {
			width: 100%;
			margin: 35rpx 0;
			background-color: #f8f8f8;
			border-radius: 10rpx;
		}
	}

	.nick {
		::v-deep .u-popup__content {
			top: -10%;
		}
	}

	.name {
		width: 598rpx;
		padding: 42rpx 32rpx 0 28rpx;

		.title {
			font-size: 34rpx;
			font-weight: bold;
			text-align: center;
		}

		.ipt {
			position: relative;

			.len {
				position: absolute;
				bottom: 0;
				right: 10rpx;
				color: #969696;
			}
		}

		.input {
			width: 100%;
			height: 82rpx;
			margin: 42rpx 0 22rpx 0;
		}

		text {
			color: #969696;
			font-size: 24rpx;
		}

		.text {
			text-align: center;
			display: block;
			margin-top: 40rpx;
			font-size: 28rpx;
		}
	}

	.btns {
		border-top: 2rpx solid #dddddd;
		margin-top: 54rpx;
		display: flex;
		justify-content: space-between;

		view {
			width: 50%;
			text-align: center;
			font-size: 28rpx;
			height: 78rpx;
			line-height: 78rpx;
			font-weight: bold;
			color: #9b9b9b;
		}

		.sure {
			color: #194FC9;
			border-left: 2rpx solid #ddd;
		}
	}

	.sex {
		padding: 62rpx 54rpx 54rpx;

		.title {
			text-align: center;
			color: #1a1a1a;
			font-weight: bold;
			font-size: 40rpx;
			margin-bottom: 84rpx;
		}

		.imgs {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.item {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;

				.ico {
					width: 140rpx;
					height: 140rpx;

					image {
						display: block;
						width: 100%;
						height: 100%;
					}
				}

				text {
					margin-top: 22rpx;
				}

				& > .color {
					color: #369cfe;
				}
			}
		}

		.close {
			text-align: center;
			margin-top: 84rpx;

			image {
				width: 70rpx;
				height: 70rpx;
			}
		}

		image {
			width: 138rpx;
			height: 142rpx;
		}
	}

	.submit {
		margin: auto;
		margin-top: 100rpx;
		width: 200rpx;
	}
}
</style>
